<template>
  <div class="monitor_page">
    <div>
      <div class="monitor_page-filter">
        <el-form ref="form" label-width="100px" :inline="true">
          <el-form-item label="起止时间：">
            <el-date-picker
              v-show="!isToggleStatus"
              style="width:100%;min-width:240px"
              size="small"
              value-format="timestamp"
              v-model="timerArray"
              type="datetimerange"
              :picker-options="pickerOptions"
              :clearable="false"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="筛选条件：" style="margin-right: 20px">
            <el-select
              v-model.trim="compareTypeModel"
              size="small"
              style="width: 80px">
              <el-option
                v-for="item in compareTypes"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="60px" label="数值：" style="margin-right: 20px">
            <el-input type="number" v-model="compareValModel" placeholder="可输入" size="small" style="width: 60%">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="monitor_page-filter flex-between">
        <div class="monitor_page-filter-left">
          <div>
            <el-button
              @click="confirmDelete"
              icon="el-icon-delete-solid"
              v-if="hasPermission('monitor:record:del')"
              type="danger">删除
            </el-button>
            <el-button
              plain
              v-if="hasPermission('monitor:record:clean')"
              icon="el-icon-s-tools"
              type="primary"
              @click="showMonitorResetDialog('inRealAngle','compensateInAngle')">设备重置
            </el-button>
            <el-button
              plain
              v-if="hasPermission('monitor:record:clean')"
              icon="el-icon-s-tools"
              type="primary"
              @click="showMonitorResetWaringDialog('compensateInAngle',)">预警值重置
            </el-button>
            <el-button
              plain
              v-if="hasPermission('monitor:record:mark')"
              type="primary"
              icon="el-icon-edit"
              @click="showMonitorRemarkDialog">数据说明
            </el-button>
            <el-button
              style="margin-top: 10px"
              plain
              v-if="jiuGanKeJi"
              type="primary"
              icon="el-icon-tickets"
              @click="lookEquipRecord(timerArray,equipId)">运行日志
            </el-button>
            <el-button
              plain
              v-if="hasPermission('monitor:record:export')"
              @click="$emit('export')"
              icon="el-icon-download"
              type="primary">数据导出
            </el-button>
            <el-button
              icon="el-icon-search"
              type="primary"
              @click="form.page=1;$emit('update')">检索数据
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <div style="width: 100%;padding-left: 10px">
      <el-tabs type="border-card" v-model="activeName" @tab-click="clickTab">
        <el-tab-pane label="数据表格" name="1">
          <span slot="label"><i class="el-icon-date"></i> 数据表格</span>
          <el-table
            v-show="!isToggleStatus"
            :data="tableList"
            border
            @selection-change="handleSelectionChange"
            ref="multipleTable"
            tooltip-effect="dark">
            <el-table-column type="selection" width="28">
            </el-table-column>
            <el-table-column prop="createTime" label="数据采集时间" min-width="135">
              <template slot-scope="scope">
                {{scope.row.createTime | formatTimer }}
              </template>
            </el-table-column>
            <el-table-column key="1" v-if="activeName==='1'" prop="compensateInAngle" label="相对倾角(°)"
                             min-width="100"></el-table-column>
            <el-table-column key="2" v-if="activeName==='1'" prop="azRealAngle" label="方位角(°)"
                             min-width="100"></el-table-column>
            <el-table-column key="3" v-if="activeName==='2'" prop="xyAngle" label="XY偏移角度(°)"
                             min-width="100"></el-table-column>
            <el-table-column key="4" v-if="activeName==='2'" prop="xyAngleSpeed" label="XY变化速率(°/h)"
                             min-width="100"></el-table-column>
            <!--        <el-table-column v-if="workPointTypeIsBuilding" prop="xyDisplacement" label="偏移位移(mm)" min-width="120">-->
            <!--        </el-table-column>-->
          </el-table>
          <!-- 分页器 -->
          <el-pagination
            v-show="!isToggleStatus"
            :disabled="isToggleStatus"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="form.page"
            :page-size="form.pageSize"
            :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
            layout="sizes, prev, pager, next,jumper"
            :total="form.total">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="数据绘图" name="2">
          <span slot="label"><i class="el-icon-s-marketing"></i> 数据绘图</span>
          <el-card class="card_echarts" shadow="hover">
            <echarts-eight-change ref="echartsChange"></echarts-eight-change>
          </el-card>
          <el-row v-if="isKsGf || jiuGanKeJi">
            <el-col :span="12">
              <el-card class="card_echarts " shadow="hover">
                <echarts-eight-old ref="echartsOld"></echarts-eight-old>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card class="card_echarts " shadow="hover">
                <echarts-eight-rate ref="echartsRate"></echarts-eight-rate>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>

    <dialog-remark ref="remark" @update="$emit('update')"></dialog-remark>
    <monitor-remark ref="monitorRemark" @update="$emit('update')"></monitor-remark>
    <monitor-reset ref="monitorReset" @update="$emit('update')"></monitor-reset>
  </div>
</template>

<script>
  import EchartsEightChange from '../monitor-echarts/base/echarts-8-change'
  import EchartsEightOld from '../monitor-echarts/base/echarts-8-change-old'
  import EchartsEightRate from '../monitor-echarts/base/echarts-8-change-rate'
  import ItemMixins from './item.mixins'
  import {store} from "../../work-point.store";

  export default {
    mixins: [ItemMixins],
    props: ['compareTypes', 'compareType', 'compareVal'],
    components: {EchartsEightChange, EchartsEightOld, EchartsEightRate},
    data() {
      return {
        activeName: "2",
        // 当前的图表钩子
        chartsName: ['echartsChange', 'echartsOld', 'echartsRate'],
        // 分页参数
        form: {
          page: 1,
          pageSize: 12,
          total: 0,
        },
        isShowDialog: false,
      }
    },
    computed: {
      compareTypeModel: {
        get() {
          return this.compareType;
        },
        set(value) {
          this.$emit("update:compareType", value);
        },
      },
      compareValModel: {
        get() {
          return this.compareVal;
        },
        set(value) {
          this.$emit("update:compareVal", value);
        },
      },
      //工点类型是否是建筑物，建筑物不展示边坡相关的信息
      workPointTypeIsBuilding() {
        const {
          workPointId
        } = this.$route.params
        const info = store.workPointList.find(x => x.id === workPointId) || {}
        return info.bianpiType === 6
      },
    },
    methods: {
      //tab 切换进行echart随着窗口改变方法，让数据重新渲染，
      clickTab() {
        this.chartsName.map((name) => {
          if (this.$refs[name]) {
            this.$nextTick(() => {
              this.$refs[name].echartResize();
            });
          }
        });

      },
      // 数据刷新
      update({data, monitorName, monitorInfo}) {
        this.equipId = monitorInfo.bindEquipId
        this.collectionList = data.recordList
        this.form.page = 1;
        this.form.total = this.collectionList.length
        // if (!this.jiuGanKeJi) {
        //   //真实倾角为空的，倾角不展示,获取真实倾角为0的下标
        //   let indexList = []
        //   data.recordList.map((x, index) => {
        //     if (x.inRealAngle === 0) {
        //       indexList.push(data.recordList.length - 1 - index)
        //     }
        //   })
        //   //过滤掉真实倾角为0的下标元素
        //   data.compensateInAngle = data.compensateInAngle.filter((x, index) => indexList.indexOf(index) === -1)
        //   //列表也不展示真实倾角为0 的数据
        //   this.collectionList = data.recordList.filter((x) => x.inRealAngle !== 0)
        //   indexList.map(x => {
        //     //过滤掉真实倾角为0的下标元素
        //     this.collectionList.splice(x, 1)
        //     //列表和绘图数据是反向的，所以索引是反向的
        //     data.compensateInAngle.splice(data.recordList.length - 1 - x, 1)
        //   });
        // }
        this.chartsName.map(async name => {
          this.$refs[name].updateEchart(data, monitorName, this.jiuGanKeJi, monitorInfo)
        })
      }
    }
  }
</script>

<style scoped="scoped" lang="less">

  @import url('./commom.less');

  // 还需自定义的css
  .card_echarts {
    height: 550px;
  }

  .monitor_page-left {
    border: 1px solid #c00003;
  }

  .el-card {
    background: transparent;
  }
</style>
